<template>
   <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <BorderBox13>
        <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
        <v-chart
          class="chart"
          :option="option"
          ref="centerMapRef"
          @click="mapClick"
          v-if="JSON.stringify(option) != '{}'"
        />
      </BorderBox13>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import { registerMap, getMap } from "echarts/core";
import { optionHandle, regionCodes } from "./center.map";
import BorderBox13 from "@/components/datav/border-box-13";
import { ElMessage } from "element-plus";

import type { MapdataType } from "./center.map";
import { GETNOBASE,centerMap } from "@/api";

const option = ref({})

const code = ref("china");//china 代表中国 其他地市是行政编码

 withDefaults(defineProps<{
    // 结束数值
    title:number | string
}>(),{
    title:'地图'
})

/**
 * 数据绘制
 * @param regionCode 中国地图、其他地级市地图
 * @param list 数据列表
 */
async function dataSetHandle(regionCode:string,list:object[]){
    const geojson:any = await getGeojson(regionCode)
    let cityCenter:any ={}
    let mapData:MapdataType[] =[]
    console.log(geojson,'===>geojson');
    
    // 获取当前地图每块行政区中心点
    geojson?.features.forEach((e:any)=>{
        cityCenter[e.properties.name] = e.properties.centroid || e.properties.center
    })
    // 当前中心点如果有词条数据中心点，则赋值x，y 当然这个x，y 也可以后端返回进行打点，前端省去多行代码
    list.forEach((item:any)=>{
        if(cityCenter[item.name]){
            mapData.push({
                name:item.name,
                value:cityCenter[item.name].concat(item.value)
            })
        }
    })
   await nextTick()

   option.value = optionHandle(regionCode,list,mapData)
}


/**
 * 获取地图数据
 * @param regionCode 中国地图、其他地级市地图
 */
function getGeojson(regionCode:string){
    console.log(regionCode,'===>regionCode');
    
    return new Promise<boolean>(async (resolve)=>{
        let mapjson = getMap(regionCode)
        if(mapjson){
            mapjson = mapjson.geoJSON
            resolve(mapjson)
        }else{
            mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
            code.value = regionCode
            registerMap(regionCode,{
                geoJSON:mapjson as any,
                specialAreas:{}
            })
            resolve(mapjson)
        }
    })
}

/**
 * 请求数据
 * @param regionCode 中国地图、其他地级市地图
 */
async function getData(regionCode:string){
centerMap({regionCode:regionCode}).then((res)=>{
    console.log("中上--设备分布===>", res);
    if(res.success){
        dataSetHandle(res.data.regionCode,res.data.dataList)
    }else{
        ElMessage.error(res.msg)
    }
}).catch((err)=>{
    ElMessage.error(err)
})
}

getData(code.value);

/**
 * 地图点击事件
 * @param params 点击省份数据
 */
function mapClick(params:any){
    let xzqData = regionCodes[params.name]
    console.log(xzqData,'===>xzqData');
    
    if(xzqData){
        getData(xzqData.adcode)
    }else{
        window["$message"].warning('暂无下级地市')
    }
}
</script>

<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;
  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
}
.mapwrap {
    height: 580px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }

}

}
</style>